<script setup lang="ts">

import type { ISuperCard,IGoods } from '@/types'
import { useRouter } from 'vue-router'
import { useAsync } from '@/use/useAsync'
import { useAuth } from '@/use/useAuth'
import { fetchOrderData } from '@/api/order'
import OpLoadingView from '@/components/OpLoadingView.vue'
const router = useRouter()
const { user, logout } = useAuth()
const { data, pending } = useAsync(fetchOrderData, {
   goods: {} as IGoods,
})

</script>

<template>
 
  <div  v-for="v in data.data" :key="v" >
     <div class="order-item" v-for="i in v.goods" :key="i.id" >
          <div class="order-ico-head">
           <img class="order-ico" src="@/assets/imgs/shop_page/order/favicon.ico" alt="ICO icon">
            
              <span class="order-item-head"> {{i.name}}</span>
              <img class="order-ico-allow" src="@/assets/imgs/shop_page/order/rightallow.png" alt="ICO icon">
           <!-- <van-icon name="arrow" size='' /> -->
         
          </div>
          <div class="image-with-text">
             <van-card
               currency=""
               :title="i.des"
               :desc=  "  '下单时间: ' + i.orderDate"
               :thumb="i.imgUrl"
               centered= true
             >
             <template #footer>
            
              <van-button round 
                color = rgb(186,106,104)
                
              >  评  价  </van-button>
             </template>
           </van-card>
          </div>
     </div>
  </div>
  

</template>


<style scoped>
  .van-card {
   color: orange; /* 将加粗效果覆盖为普通样式 */
  }

  .order-ico-head {
    font-size: 8px;
      height: 20px;
      font-weight: bold;
      line-height: 20px;
     
  }
  .order-ico {
   
       height: 15px;
       width: 15px;
       position: relative;
       top: 4px;
  }
  .order-item-head {
     
  }
  .order-item-head-right {
      
      float: right;
  }
  .order-ico-allow {
    height: 8px;
    width: 8px;
    margin-left: 5px;
  }
  .order-price {
       display: inline-block;
       padding-bottom: 50px;
  }
 
  .image {
    width: 80PX;
    height: 80PX;
  }
  .caption {
      display: block; /* 或者使用 display: inline-block; */
        margin-top: 5px; /* 设置上方间距 */
  margin-left: 10px; /* 调整文字与图片之间的距离 */
  font-size: 10px; /* 设置文字大小 */
  color: #333; /* 设置文字颜色 */
}


  .order-item {
       border-radius: 10px; 
     
    background-color: rgb(247,248,250);
    padding: 10px;
    
    margin: 10px  20px;
  }
 
  
</style>

